<template>
	<view @tap="clickAction" class="bg-white radius shadow-blur">
		<view class="flex justify-start align-start">
			<view class="flex justify-start align-center padding-sm" style="flex-direction: column;">
				<view class="radius padding-bottom-xs">
					<image class="radius" :src="thumbUrl" style="width:88px;height:88px;"></image>
				</view>
				<view class="bg-orange radius flex align-center justify-center" style="width: 90%;">
					<text class="text-xl text-white text-price">{{price}}元</text>
				</view>
			</view>
			<view class="flex justify-start align-start padding-top-sm padding-right-sm" style="flex-direction: column;width: 100%;">
				<view class="padding-bottom-sm">
					<text class="text-bold text-bold">{{goodsName}}</text>
				</view>
				<view class="flex justify-start align-center">
					<view v-for="(item,index) in tags" :key="index" class="padding-right-xs">
						<view v-if="item!=null" :class="'cu-tag radius sm bg-'+tagColor">{{item}}</view>
					</view>
				</view>
				<view class="padding-top-sm padding-bottom-sm flex align-center justify-start">
					<view v-if="goodsInfo.has_coupon && mallType!==1" class="cu-tag radius padding-left-sm bg-mauve">优惠券</view>
					<view v-if="goodsInfo.has_mall_coupon && mallType!==1" class="cu-tag radius padding-left-sm bg-olive">店铺券</view>
					<view class="padding-left-sm">
						<text class="text-df">已售出:<text class="text-red">{{saleCount}}</text>件</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"GoodsItemDetail",
		data() {
			return {
				
			};
		},
		props: {
			goodsInfo: {
				type: Object,
				default: {}
			},
			mallType: {
				type: Number,
				default: 0
			}
		},
		computed: {
			goodsName() 
			{
				if(this.goodsInfo == null) {
					return ''
				}
				if(this.mallType == 1) {
					return this.goodsInfo.name 
				}
				return this.goodsInfo.goods_name
			},
			thumbUrl() 
			{
				if(this.goodsInfo == null) {
					return ''
				}
				if(this.mallType == 1) {
					return this.goodsInfo.image
				}
				return this.goodsInfo.goods_thumbnail_url
			},
			price() 
			{
				if(this.goodsInfo == null) {
					return ''
				}
				if(this.mallType == 1) {
					return this.goodsInfo.price/100
				}
				return this.goodsInfo.min_normal_price/100
			},
			tags() 
			{
				if(this.goodsInfo == null) {
					return []
				}
				if(this.mallType == 1) {
					return this.goodsInfo.labels 
				}
				return this.goodsInfo.unified_tags
			},
			saleCount() 
			{
				if(this.goodsInfo == null) {
					return 0
				}
				if(this.mallType == 1) {
					return this.goodsInfo.total_sale_count
				}
				return this.goodsInfo.sales_tip
			},
			tagColor() {
				let colors = [
					'red',
					'cyan',
					'blue',
					'yellow',
					'green',
					'purple',
					'pink',
					'brown'
				]
				let randIndex = this.getRandomNum(0, colors.length - 1)
				return colors[randIndex]
			}
		},
		methods: {
			clickAction() 
			{
				this.$emit('click')
			},
			getRandomNum(Min, Max) {
				var Range = Max - Min;
				var Rand = Math.random();
				let rand = (Min + Math.round(Rand * Range));
				return rand
			}
		},
	}
</script>

<style lang="scss">

</style>
